BabylonJS-এ Keyframes ব্যবহার করে এনিমেশন তৈরি করা অনেক সহজ এবং শক্তিশালী একটি পদ্ধতি। Keyframes হল বিশেষ পয়েন্ট বা মোমেন্ট যেখানে আপনি অবজেক্টের অবস্থান, আকার, রঙ বা অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। এভাবে, আপনি অবজেক্টের সময়ের সাথে সাথে এনিমেটেড পরিবর্তন দেখতে পারবেন।
এই গাইডে, আমরা Keyframes ব্যবহার করে একটি সিম্পল এনিমেশন তৈরি করব, যেখানে একটি বক্সের আকার পরিবর্তন হবে এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে চলাচল করবে।
১. প্রজেক্ট ফোল্ডার তৈরি
প্রথমে, একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করুন এবং সেখানে একটি index.html ফাইল তৈরি করুন।
২. HTML ফাইল তৈরি
নিচে একটি সিম্পল HTML কোড দেওয়া হলো যেখানে আমরা Keyframes ব্যবহার করে একটি বক্সের আকার পরিবর্তন এবং চলাচল করার এনিমেশন তৈরি করব:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS - Keyframe Animation</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);
// BabylonJS দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস তৈরি করা
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.x = 0;
// Keyframe এনিমেশন তৈরি করা
var frame1 = {
frame: 0,
value: box.scaling.x // বক্সের আকার শুরু হবে 1
};
var frame2 = {
frame: 20,
value: 2 // বক্সের আকার হবে 2
};
var frame3 = {
frame: 40,
value: 1 // বক্সের আকার হবে 1
};
// বক্সের আকার পরিবর্তনের জন্য এনিমেশন
var animation = new BABYLON.Animation("scaleAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
animation.setKeys([frame1, frame2, frame3]);
// বক্সে এনিমেশন যুক্ত করা
box.animations.push(animation);
// বক্সের স্থান পরিবর্তন (মুভমেন্ট) এনিমেশন
var moveAnimation = new BABYLON.Animation("moveAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
moveAnimation.setKeys([
{ frame: 0, value: 0 },
{ frame: 20, value: 5 },
{ frame: 40, value: 0 }
]);
// বক্সে মুভমেন্ট এনিমেশন যুক্ত করা
box.animations.push(moveAnimation);
// এনিমেশন রানের জন্য
scene.beginAnimation(box, 0, 40, true);
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে, BabylonJS আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Canvas এবং Engine:
index.htmlফাইলে একটি<canvas>ট্যাগ ব্যবহার করা হয়েছে, যেখানে আমরা BabylonJS এর দৃশ্য রেন্ডার করব। তারপরBABYLON.Engineদিয়ে রেন্ডারিং ইঞ্জিন তৈরি করা হয়েছে। - Scene: একটি
BABYLON.Sceneতৈরি করা হয়েছে, যেখানে আমরা সব 3D অবজেক্ট এবং ক্যামেরা রাখব। - Camera:
ArcRotateCameraব্যবহার করা হয়েছে, যা ব্যবহারকারীকে দৃশ্য ঘুরিয়ে দেখার সুবিধা দেবে। - Light:
HemisphericLightব্যবহার করা হয়েছে, যা পরিবেশে আলো ছড়াতে সাহায্য করবে। - Box:
BABYLON.MeshBuilder.CreateBoxদিয়ে একটি বক্স তৈরি করা হয়েছে এবং সেটি X-অ্যাক্সিসে কিছুটা সরে রাখা হয়েছে।
৩. Keyframe এনিমেশন
এখানে দুটি এনিমেশন তৈরি করা হয়েছে:
১. Scale (আকার পরিবর্তন):
- Keyframes ব্যবহার করে বক্সের আকার পরিবর্তন করা হয়েছে।
- প্রথম Keyframe (
frame: 0) এ বক্সের আকার 1 থাকবে। - দ্বিতীয় Keyframe (
frame: 20) এ বক্সের আকার 2 হবে। - তৃতীয় Keyframe (
frame: 40) এ বক্সের আকার আবার 1 হয়ে যাবে।
- প্রথম Keyframe (
এটি বক্সের আকারকে সাইকেল আকারে পরিবর্তিত করবে।
২. Position (চলাচল):
- Keyframes ব্যবহার করে বক্সের অবস্থান পরিবর্তন করা হয়েছে।
- প্রথম Keyframe (
frame: 0) এ বক্সের অবস্থান 0 থাকবে। - দ্বিতীয় Keyframe (
frame: 20) এ বক্স X-অ্যাক্সিসে 5 জায়গায় চলে যাবে। - তৃতীয় Keyframe (
frame: 40) এ বক্স আবার 0 অবস্থানে ফিরে আসবে।
- প্রথম Keyframe (
এটি বক্সকে নির্দিষ্ট গতিতে চলতে সাহায্য করবে।
৪. ব্রাউজারে প্রজেক্ট পরীক্ষা করা
এখন আপনি আপনার index.html ফাইলটি ওয়েব ব্রাউজারে খুললে, বক্সটি ধীরে ধীরে আকার পরিবর্তন করবে এবং X-অ্যাক্সিসে চলাচল করবে। আপনি মাউস দিয়ে দৃশ্যটি ঘুরিয়ে দেখতে পারবেন।
অতিরিক্ত টিপস
এনিমেশন টাইমিং:
BABYLON.AnimationএspeedRatioপ্যারামিটার ব্যবহার করে আপনি এনিমেশনের গতি নিয়ন্ত্রণ করতে পারেন।scene.beginAnimation(box, 0, 40, true, 1.5); // এনিমেশন গতি 1.5x হবে- Looping:
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLEবাBABYLON.Animation.ANIMATIONLOOPMODE_CONSTANTব্যবহার করে আপনি এনিমেশন লুপিং কনফিগার করতে পারেন।CYCLE: এনিমেশন লুপে চলবে (শুরু থেকে শেষ পর্যন্ত ফিরে আসবে)।REVERSE: এনিমেশন উল্টো দিকে চলবে।CONST: একবার সম্পূর্ণ হবে এবং বন্ধ হয়ে যাবে।
সারাংশ
এই গাইডে আমরা Keyframes ব্যবহার করে BabylonJS-এ একটি সিম্পল এনিমেশন তৈরি করেছি, যেখানে একটি বক্সের আকার পরিবর্তন এবং চলাচল হয়েছে। আপনি এই পদ্ধতি ব্যবহার করে আরও জটিল এনিমেশন তৈরি করতে পারবেন এবং 3D অবজেক্টের গতিবিধি ও পরিবর্তন নিয়ন্ত্রণ করতে সক্ষম হবেন।
Read more
